<template>
	<view class="modify">
		<u-toast ref="uToast" />
		<u-row gutter="50">
			<u-col span="12">
				<view class="content">
					<u-field
					  input-align="right"
						v-model="mobile"
						icon=""
						maxlength="11"
						label="手机号"
						placeholder="请输入手机号"
						placeholder-style="color:#D9D9D9"
					>
					</u-field>
					<u-field
						v-model="code"
						icon=""
						input-align="right"
						label="验证码"
						placeholder="请输入验证码"
						placeholder-style="color:#D9D9D9"
					>
						<u-button size="mini" slot="right" type="primary" shape="circle" @click="getCode">{{codeText}}</u-button>
					</u-field>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				</view>
			</u-col>
		</u-row>
		<view class="butBack">
			<u-button class="but" type="primary" @click="submitData" shape="circle" >确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name:'modifyPhone',
		data() {
			return {
				mobile: '',
				code: '',
				codeText: '',
				key: ''
			}
		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				console.log(this.$check.isMobile(this.mobile))
				if(this.$check.isMobile(this.mobile) == false) {
					this.$refs.uToast.show({
						title: '请正确填写手机号',
						type: 'error'
					})
				} else {
					if(this.$refs.uCode.canGetCode) {
						// 向后端请求验证码
						this.$ajax.post({
							url: `/blade-user/updatePhone/sendCode/${this.mobile}`
						}).then(res => {
							// console.log(res)
							if(res.code == 200) {
								uni.showLoading({
									title: '正在获取验证码'
								})
								setTimeout(() => {
									uni.hideLoading();
									this.$refs.uToast.show({
										title: '验证码发送成功',
										type: 'success'
									})
									// 通知验证码组件内部开始倒计时
									this.$refs.uCode.start();
								}, 1000);
								this.key = res.data
							} else if(res.code = 400) {
								this.$refs.uToast.show({
									title: '手机号已存在',
									type: 'error'
								})
							}
						})
						.catch(res => {
							console.log(res)
						})
					}else {
						this.$refs.uToast.show({
							title: '倒计时结束后再发送',
							type: 'warning'
						})
					}
				}
			},
			// 提交数据
			submitData() {
				if(this.mobile) {
					this.$ajax.post({
						url: `/blade-user/updatePhone/${this.mobile}`,
						header: {
							'Sms-Captcha-Key': this.key,
							'Sms-Captcha-Code': this.code,
							"content-type":"application/x-www-form-urlencoded;charset=UTF-8",
						}
					}).then(res => {
						// console.log(res)
						if(res.code == 200) {
							this.$refs.uToast.show({
								title: '手机号修改成功',
								type: 'success'
							})	
							this.$navJump.reLaunch('/pages/mine/mine');			
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '手机号或验证码不得为空',
						type: 'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  page {
		background: #f5f5f5;
	}
	.modify {
		margin-top: 25rpx;
		.content {
			background: #FFFFFF;
		}
		.butBack {
			width: 90%;
			margin: 220rpx 5% 0;
			overflow: hidden;
			/deep/.u-btn--primary{
				background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important
			}
		}
	}
</style>
